<template>
  <div class="demo">
    <h4>图标</h4>
    <div class="icons">
      <div @click="copy(`<Icon name=“${icon}“/>`)" class="box" v-for="(icon, index) in icons" :key="index">
        <AfastIcon :name="icon" :size="40" class="icon" />
        <div @click.stop="copy(icon)" class="icon-name">{{ icon }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { AfastIcon } from 'afast-ui';
import useClipborad from 'vue-clipboard3'
const copy = (text) => {
  text = text.replace('“', '"').replace('“', '"')
  if (confirm(`将${text}写入剪切板？`)) {
    useClipborad().toClipboard(text)
  }
}
const icons = JSON.parse('["pen","store","DND_mode","Incoming_call","MTR","QA","addmeteo","address","addresslist","addto","agreement","answer","audio","back","birthday","bluetooth_link","bluetoothoff","bluetoothon","bluray","bookresource","bottom","brightness","call","callingrobort","callout","camera","cancel","cancelwhite","cart","check","checkmore","checksurface","child","clock","close","collection","connectdevice","conversation","cook","course","custom","delete","deviceoff","deviceon","diffuserplay","diffuserplayarea","diffuserstop","diffuserstoparea","dinner","disconnectdevice","dislike","distance","donework","down","edit","entertainmentmark","evitarehighway","evitarepayment","evitaretraffic","eye_protection","face","faimlyalbum","favoriteslist","feeding","genieSEC","geniecalling","genieclock","geniecommunity","getout","getup","gohome","goodnight","groupctrl","guarantee","guests","hangup","highwayfirst","history","home","hot","housecare","housecleaning","huoyan","increase","info","infopersonal","information","instruction","kidslock","layered","lightctrl","like","locking","loop","mark","marks","maskclock","masterctrl","meeting","meetingover","menu","message","messagewhite","microphoneoff","mirrorlightctrl","movie","music","musiclist","mute","mutemode","next","nextsong","nickname","night","nosignal","payment","paymentlife","phone","phonebill","play","prevent","previous","privac_open","privacy","privacy_closed","problem","prompt","protect","putbabytobed","queenmirror","radiobuttonselect","radiobuttonunselect","random","record","refresh","refuse","relationship","respond","restore","safety","save","scanQR","scanread","schedule","search","selection","seriesfinale","setting","settings","share","shopping","singing","singlecycle","skintest","sleepmode","soundsize","stepback","suggestion","takeabreak","telephone","th_internet","timeout","tipsmoney","togo","top","turnvoice","upward","video","visible","vision","voice","voicememo","voiceprint","volume","wakeupbaby","washingroom","watchseries","wifi","withdraw","xiamimusic"]')
</script>
<style lang="less" scoped>
.icons {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;

  .box {
    position: relative;
    cursor: pointer;
    width: 90px;
    height: 90px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 50px;
    padding-top: 20px;
    box-sizing: border-box;
    --icon-fill-color: #555;

    .icon-name {
      text-align: center;
      width: 80%;
      position: absolute;
      bottom: 5px;
      font-size: 13px;
      overflow: hidden;
    }

    .icon-name:hover {
      font-weight: bold;
    }
  }

  .box:hover {
    --icon-fill-color: var(--primary-color);
    color: var(--primary-color);
  }
}
</style>
